<template>
	<div>
		{{apiURL}}
		 <el-input  v-model="city" class="input-with-select" @keyup.native.enter="handleGetWeather">
		  </el-input>
		  <el-button type="text" @click="changeCity('北京')">北京</el-button>
		  <el-button type="text" @click="changeCity('上海')">上海</el-button>
		  <el-button type="text" @click="changeCity('广东')">广东</el-button>
		  <el-button type="text" @click="changeCity('深圳')">深圳</el-button>
		  
		<ul class="list">
			<li v-for="(item,key) in weatherList" :key="key">
				日期：{{item.date}}<br/>
				风力：{{item.fengli}}<br/>
				风像：{{item.fengxiang}}<br/>

			</li>
		</ul>
	</div>
</template>

<script>
	import axios from 'axios'
	export default{
		name:'Weahter',
		data(){
			return{
				weatherList:[],
				city:'济南',
				apiURL:process.env.VUE_APP_BASE_WEATHER_TARGET
			}
			
		},
		created(){
			this.handleGetWeather();
		},
		methods:{
			changeCity(cityName){
				this.city=cityName;
				this.handleGetWeather();
			},
			handleGetWeather(){
				var that =this;
				axios.get(that.apiURL+"/weather_mini?city="+that.city)
				.then(function(res){
					that.weatherList=res.data.data.forecast;
					console.log(that.weatherList);
				})
			}
		}
	}
</script>

<style>
	.list{
		list-style: none;
	}
	.list li{
		text-align: left;
		border-bottom: 1px dotted #13CE66;
		line-height: 30px;
		margin-bottom: 20px;
	}
</style>
